<template>
  <div class="container">
    <el-card>
      <!--搜索框区域------------- -->
      <el-row>
        <el-col :span="22"
          ><div class="grid-content bg-purple">
            <el-form :inline="true" :model="formData">
              <el-form-item label="目录名称">
                <el-input v-model="formData.directoryName" />
              </el-form-item>
              <el-form-item label="状态">
                <el-select placeholder="请选择" v-model="formData.state">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="resetForm">清除</el-button>
                <el-button type="primary" @click="searchDirectorys">搜索</el-button>
              </el-form-item>
            </el-form>
          </div></el-col
        >
        <el-col :span="2">
          <div class="grid-content bg-purple-light">
            <el-button type="success" @click="isShow = true">
              <i class="el-icon-edit"></i>
              新建目录
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 消息提示区域 -->
      <el-alert type="info" show-icon>数据一共{{counts}}条</el-alert>
      <!-- 表格区域----------------------------------- -->
      <el-table style="width: 100%" :data="tableList">
        <el-table-column label="序号" type="index" :index="indexMethods"> </el-table-column>
        <el-table-column label="所属学科" prop="subjectName"> </el-table-column>
        <el-table-column label="目录名称" prop="directoryName">
        </el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期" prop="addDate" >
          <template #default="{row}">{{row.addDate|time}}</template>
        </el-table-column>
        <el-table-column label="面试数量" prop="totals"> </el-table-column>
             <el-table-column label="状态" prop="state">
                <template #default="{row}">
               {{row.state===1?'已启用':'已禁用'}}
                 </template>
             </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <!-- 如果state=1是显示禁用 state=0是显示 -->
            <el-button size="mini" type="text" @click="stop(row)">{{row.state===1?'禁用':'启用'}}</el-button>
            <el-button size="mini" type="text" @click="edit(row.id)" :disabled="row.state===1" >修改</el-button>
            <el-button size="mini" type="text" @click="del(row.id)" :disabled="row.state===1">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器------------------------ -->
        <el-pagination
        style="text-align: right"
        :current-page="page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
       </el-pagination>
    </el-card>
    <!-- 对话框 --------------------->
  <el-dialog :title="titleDialog" :visible.sync="isShow" width="25%" @close="handleClose">
  <el-form :model="Form">
       <el-form-item label="所属学科" label-width="80px">
      <el-select v-model="Form.subjectID" placeholder="请选择">
        <el-option v-for="item in subjectList" :key="item.subjectID" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="目录名称" label-width="80px">
      <el-input v-model="Form.directoryName" placeholder="请输入目录名称" style="width:265px"/>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleAdd">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
import { list, add, remove, detail, update, changeState } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import moment from 'moment'
export default {
  // 日期过滤器
  filters: {
    time (val) {
      return moment(val).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    return {
      formData: {
        directoryName: null,
        state: null
      },
      tableList: [],
      page: 1, // 当前页码
      pagesize: 10, // 默认每页条数
      pages: 1,
      counts: 0, // 总页数
      // 总数量
      isShow: false,
      isOpen: false,
      // 添加的----
      Form: {
        directoryName: '',
        subjectID: '',
        id: null
      },
      subjectList: []
    }
  },
  // 计算属性判断标题
  computed: {
    titleDialog () {
      return this.Form.id ? '修改目录' : '新增目录'
    }
  },
  created () {
    this.getDirectorysList()
    this.getSimple()
  },
  methods: {
    async stop (row) {
      await changeState({
        id: row.id,
        state: row.state
      })
      // 打印的当前项的所有值
      console.log(row, 8899)
      // 为1启用点击的时候disabled=true,为0disabled的为false 相当于点击的是时候值取反
      row.state = row.state === 1 ? 0 : 1
    },
    // 获取目录列表
    async getDirectorysList () {
      const {
        data: { items, counts, pages }
      } = await list({ page: this.page, pagesize: this.pagesize, subjectID: this.$route.query.id || null })
      this.tableList = items
      this.counts = counts
      this.pages = pages
      console.log(items, 2222)
    },
    // 筛选目录-----------------------
    async searchDirectorys () {
      const { data: { items } } = await list(this.formData)
      this.page = 1
      this.tableList = items
    },
    // 清空筛选框-----------------------
    resetForm () {
      this.formData = {
        directoryName: null,
        state: null
      }
    },
    // 分页器---------------
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      console.log(`每页 ${val} 条`)
      this.getDirectorysList()
      // 获取数据重新渲染
    },
    handleCurrentChange (val) {
      this.page = val
      console.log(`当前页: ${val}`)
      this.getDirectorysList()
    },
    indexMethods (index) {
      return index + 1 + (this.page - 1) * this.pagesize
    },
    // 获取学科简单列表
    async getSimple () {
      const res = await simple()
      this.subjectList = res.data
      console.log(res, '学科简单列表')
    },
    // 关闭对话框
    handleClose () {
      this.isShow = false
      this.Form = {
        directoryName: '',
        subjectID: '',
        id: null
      }
    },
    // 新增目录------------------
    async handleAdd () {
      if (this.Form.id) {
        const res = await update(this.Form)
        this.$message.success('编辑成功')
        console.log(res)
      } else {
        const res = await add(this.Form)
        console.log(res, 7788)
        this.$message.success('添加目录成功')
      }

      this.Form = {
        directoryName: '',
        subjectID: ''
      }
      this.isShow = false
      this.getDirectorysList()
    },
    // 修改目录------------------------
    async edit (id) {
      // 点击时时是回显 提交时更新
      this.isShow = true
      const res = await detail({ id: id })
      const { data } = res
      this.Form.directoryName = data.directoryName
      this.Form.subjectID = data.subjectID
      this.Form.id = data.id
    },

    // 删除目录：
    del (id) {
      // 判断是否是最后一页且页数大于1
      if (this.tableList.length === 1 && this.pages > 1) {
        this.page--
      }
      this.$confirm('此操作不可逆，确定删除吗?', '温馨提示').then(async () => {
        const res = await remove({ id: id })
        console.log(res, 777)
        this.$message.success('删除成功')
        this.getDirectorysList()
      }).catch(() => {
        this.$message('取消成功')
      })
    }

  }
}
</script>

<style scoped lang="less">
</style>
